<template>
  <div class="content">
    <Appheader ref="loginStatus" style="display:none;"></Appheader>
    <div class="top_header">
      <div class="header">
        <div class="header_left flex" @click="logo">
          <!-- <img src="../../assets/topnavhome.png" alt />
          艺传首页 -->
          <!-- <img class="logo" src="../../assets/logo.png" alt @click="logo" /> -->
        </div>
        <div class="header_right">
          <div class="header_right_a vv" @click="toItem(3)"><img class="logo" src="../../assets/header_icon1.png"/>学习中心</div>
          <div class="header_right_a vv" @click="toItem(0)"><img class="logo" src="../../assets/header_icon2.png"/>我的订单</div>
          <div
            class="header_right_a flex aa"
            :class="aabg==true?'bga':''"
            @mouseover="aa"
            @mouseleave="aa_go"
          >
            <img class="logo" src="../../assets/header_icon3.png"/>手机学习
            <!-- <img src="../../assets/black_down.png" alt />
            <div class="appcode" v-show="isaadown">
              <div>
                <img src="../../assets/Wx2.png" alt />
                <div>随时逛&nbsp;&nbsp;&nbsp;随时看</div>
              </div>
            </div> -->
          </div>
          <div class="header_right_a vv" @click="toAise('帮助')">帮助</div>
          <div class="header_right_a bb flex">
            <div class="header_right_a bb2" @mouseover="mouseOver" @mouseleave="mouseLeave">
              <p :class="hide_addr==true?'bb2_p1':''">{{info.phone}}</p>
              <p v-show="hide_addr" @click="toItem(5)" class="bb2_p2">账号设置</p>
              <p v-show="hide_addr" @click="toItem(0)" class="bb2_p2">我的订单</p>
              <p v-show="hide_addr" @click="toItem(1)" class="bb2_p2">购物车</p>
              <!-- <p v-show="hide_addr" @click="toItem(2)" class="bb2_p2">收货地址</p> -->
              <p v-show="hide_addr" @click="toItem(3)" class="bb2_p2">我的课程</p>
            </div>
          </div>
          <div class="header_right_a red_color" @click="outlogin">退出</div>
        </div>
      </div>
    </div>
    <div class="second_nav">
      <div class="header_second flex">
        <img class="logo" src="../../assets/logo.png" alt @click="logo" />学习中心
      </div>
    </div>
    <div class="main_nav flex" @click="toItem(4)">
      <img :src="bg_main" alt class="main_bg" />
      <div class="left_a flex">
        <img :src="info.photo" alt v-if="info.photo" />
        <div>
          <p v-if="info.username">{{info.username}}</p>
          <p class="left_a_p">{{info.phone}}</p>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="main_left">
        <div class="left_c">
          <div :class="active==3 ? 'active' : ' '" @click="toItem(3)">我的课程</div>
          <div :class="active==6 ? 'active' : ' '" @click="toItem(6)">我的题库</div>
          <div :class="active==7 ? 'active' : ' '" @click="toItem(7)">我的答疑</div>
          <div :class="active==8 ? 'active' : ' '" @click="toItem(8)">我的作业</div>
          <div :class="active==5 ? 'active' : ' '" @click="toItem(5)">账号设置</div>
          <div :class="active==0 ? 'active' : ' '" @click="toItem(0)">订单中心</div>
          <div :class="active==1 ? 'active' : ' '" @click="toItem(1)">购物车</div>
          <!-- <div :class="active==2 ? 'active' : ' '" @click="toItem(2)">收货地址</div> -->
        </div>
      </div>
      <div class="main_right">
        <router-view />
      </div>
    </div>
    <Appfooter></Appfooter>
  </div>
</template>

<script>
import Appheader from "../header";
import Appfooter from "../footer";
import { info, ykPc_list,outlogin } from "../../api/index";
export default {
  props: {},
  data() {
    return {
      info: {},
      active: 0,
      aabg: false,
      isaadown: false,
      hide_addr: false,
      bg_main:''
    };
  },
  computed: {},
  created() {},
  mounted() {
    if (!localStorage.getItem("YKuserid")) {
      this.$refs.loginStatus.login();
      return;
    }
    let msg = {
      title: "个人中心图片"
    };
    ykPc_list(this.qs(msg))
      .then(res => {
        // console.log(res);
        if (res.data.code == 0) {
          if (res.data.ykPc && res.data.ykPc.content) {
            //匹配src属性
            var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/;
            var arr = res.data.ykPc.content.match(srcReg);
            this.bg_main = arr[1];
          }
        }
      })
      .catch(e => {});
    this.post();
  },
  watch: {},
  methods: {
    activeItem() {
      if (location.href.indexOf("editMsg") != -1) {
        this.active = 4;
      } else if (location.href.indexOf("car") != -1) {
        this.active = 1;
      } else if (location.href.indexOf("order") != -1) {
        this.active = 0;
      }else if (location.href.indexOf("myKecheng") != -1) {
        this.active = 3;
      } else if (location.href.indexOf("orderDetail") != -1) {
        this.active = 0;
      } else if (location.href.indexOf("orderWuliu") != -1) {
        this.active = 0;
      }else if (location.href.indexOf("account") != -1) {
        this.active = 5;
      }else if (location.href.indexOf("dayi") != -1) {
        this.active = 7;
      }else if (location.href.indexOf("tiku") != -1) {
        this.active = 6;
      }else if (location.href.indexOf("homework") != -1) {
        this.active = 8;
      }
    },
    toheader() {
      this.$refs.loginStatus.userDetail();
    },
    post() {
      let msg = {
        id: localStorage.getItem("YKuserid")
      };
      info(this.qs(msg))
        .then(res => {
          if (res.data.code == 0) {
            this.info = res.data.ykUser;
          }
        })
        .catch(e => {});
    },
    toItem(i) {
      this.active = i;
      if (i == 0) {
        this.$router.push({
          name: "order"
        });
      } else if (i == 1) {
        this.$router.push({
          name: "car"
        });
      } else if (i == 3) {
        this.$router.push({
          name: "myKecheng"
        });
      } else if (i == 4) {
        this.$router.push({
          name: "editMsg"
        });
      } else if (i == 5) {
        this.$router.push({
          name: "account"
        });
      }else if (i == 6) {
        this.$router.push({
          name: "tiku"
        });
      }else if (i == 7) {
        this.$router.push({
          name: "dayi"
        });
      }else if (i == 8) {
        this.$router.push({
          name: "homework"
        });
      }
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    //回到首页
    logo() {
      this.$router.push({
        name: "home"
      });
    },
    aa() {
      this.isaadown = true;
      this.aabg = true;
    },
    aa_go() {
      this.isaadown = false;
      this.aabg = false;
    },
    mouseOver() {
      this.hide_addr = true;
    },
    mouseLeave() {
      this.hide_addr = false;
    },
    //退出
    outlogin() {
      let that = this;
      let msg = {
        id: localStorage.getItem("YKuserid")
      };
      outlogin(this.qs(msg))
        .then(res => {
          this.$message({
            type: "info",
            message: res.data.msg
          });
          that.$router.push({
            name: "home",
          });
          if (res.data.code == 0) {
            localStorage.removeItem("YKuserid");
            localStorage.removeItem("YKuserphone");
          }
        })
        .catch(e => {});
    },
    toAise(name){
      this.$router.push({
        name:'asideCon',
        params:{
          title:name
        }
      })
    }
  },
  components: { Appheader, Appfooter }
};
</script>

<style scoped>
@import '../../assets/css/main.scss';
</style>
